<template>
    <div class="content">
        <p>需求：使用下拉选项框制作一个既可以保存手动输入内容，又可以保存下拉选项框中选中内容的选项框</p>
        <div class="show-input">
            <!-- clearable：是否可以清空选项(可选)-->
            <!-- filterable：是否可搜索（必要） -->
            <!-- allow-create：是否允许用户创建新条目，需配合 filterable 使用（必要）-->
            <el-select v-model="inputValue" @blur="selectBlur" @change="selectChange" style="width: 30%" filterable
                clearable allow-create placeholder="请输入或选择数据" ref="selectInput">
                <el-option v-for="item in dataOptions" :key="item.value" :label="item.label" :value="item.label">
                </el-option>
            </el-select>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            inputValue: '',//select绑定值
            //下拉选项数据
            dataOptions: [
                {
                    label: '选项1',
                    value: '1'
                }, {
                    label: '选项2',
                    value: '2'
                }, {
                    label: '选项3',
                    value: '3'
                },
            ]
        }
    },
    methods: {
        // 手动输入
        selectBlur(e) {
            if (e.target.value) {
                // 当下拉选择框中的值是手动输入的就将手动输入的值赋值给this.inputValue
                this.inputValue = e.target.value;
            }
        },
        // 下拉选中
        selectChange(val) {
            if (val) {
                // 当选项框中的值不是手动输入的就将选中的value赋值给this.inputValue
                this.inputValue = val
                // 如果后端同时需要value值就通过循环遍历取出value值
                let value = this.dataOptions.find((item) => item.label == val)?.value;
            }
        },
    }
};
</script>
<style lang='less' scoped>
.content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    p {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }

    .show-input {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>